/**
 * @description easy add eventlistenr
 * @param dom
 * @param eventType
 * @param eventHander
 * @param eventPhase
 */
function $on(dom, eventType, selector, eventHander, eventPhase) {
    if (typeof selector === "string") {
        $delegation(dom, selector, eventType, eventHander)
        return;
    }
    // we add _ before eventType because the case perhaps override the origenal para in dom we need different it
    var _eventType = '_' + eventType
    // we use dom to store all event
    if (_eventType in dom) {
        dom[_eventType].push(selector)
    } else {
        dom[_eventType] = [selector]
    }
    dom.addEventListener(eventType.split(".")[0], selector, eventPhase)
}

function $off(dom, eventType) {
    var callback_list = dom['_' + eventType]
    callback_list.forEach(function (callback) {
        dom.removeEventListener(eventType.split(".")[0], callback)
    })
    callback_list.length = 0
    console.log(callback_list)
}

function $delegation(dom, selector, eventType, eventHander) {
    try {
        dom.addEventListener(eventType, function (e) {
            e = e || event
            var _target = e.target || e.srcElement
            var _type = selector.slice(0, 1)
            var _targetType = ""
            var _selector = ""
            while (_target !== dom) {
                switch (_type) {
                    case '.':
                        _targetType = "className"
                        _selector = selector.slice(1)

                        break;
                    case '#':
                        _targetType = "id"
                        _selector = selector.slice(1)

                        break;
                    default:
                        _targetType = "nodeName"
                        _selector = selector.toUpperCase()

                }
                if (_target===null){
                    return;
                }
                if (_target[_targetType] === _selector) {
                    eventHander.call(_target, e)
                    return;
                }
                _target = _target.parentElement

            }
        })
    }catch (e) {

    }
}